<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>on-hash-change</title>
</head>
<body>

<button onclick="changePart()">点我</button>
<p id="demo"></p>

<script>
	function changePart() {
		location.hash = "part5";
		var x = "锚部分现在为: " + location.hash;
		document.getElementById("demo").innerHTML = x;
	}

	window.addEventListener("hashchange", myFunction);

	function myFunction() {
		alert("锚部分已修改！");
	}

	// jquery $(window).on('hashchange', function() {});


	// @module 显示下一页 不要这样写。写跳转
	var showpage = {
		task: function(id){
			$(id).show().siblings('.page').hide();
			location.hash = id;
		},
		event: function(){
			$(function(){showpage.task(location.hash);});
			$(window).on('hashchange',function(){
				showpage.task(location.hash);
//				location.reload();
			});
		}
	};
	showpage.event();


</script>
</body>
</html>